<template>
	<view class="body">
		<view class="container pt40 p30">
			<view class="bg-white section br32 mb40">
				<view class="section-header d-b-c pt35 pb35 pl40 pr40">
					<view class="section-title f34 fb pl20">订单信息</view>
				</view>
				<view class="p40 fb">
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">订单号</view>
						<view class="info-value flex-1">{{ detail.id }}</view>
					</view>
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">课程名称</view>
						<view class="info-value flex-1">{{ detail.courseName }}</view>
					</view>
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">学员</view>
						<view class="info-value flex-1">{{ detail.studentName }}</view>
					</view>
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">金额</view>
						<view class="flex-1 red">￥{{ detail.totalPrice }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="p40 bg-white br32" v-if="!detail.paid">
				<view class="payment-methods d-f f-w mt40 mb40">
					<view class="payment-method tc p40 br28 active" @click="selectPayment(this)">
						<view class="payment-icon mb30">
							<i class="iconfont icon-weixin f64"></i>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view class="payment-method tc p40 br28" @click="selectPayment(this)">
						<view class="payment-icon mb30">
							<i class="iconfont icon-zhifubaozhifu f64"></i>
						</view>
						<view class="payment-name">支付宝</view>
					</view>
					<view class="payment-method tc p40 br28" @click="selectPayment(this)">
						<view class="payment-icon mb30">
							<i class="iconfont icon-yinhangqia f64"></i>
						</view>
						<view class="payment-name">银行卡</view>
					</view>
					<view class="payment-method tc p40 br28" @click="selectPayment(this)">
						<view class="payment-icon mb30">
							<i class="iconfont icon-qianbaoyue f64"></i>
						</view>
						<view class="payment-name">余额支付</view>
					</view>
				</view>
				<view class="btn btn-primary white ww100 f32 tc br50 pt30 pb30 fb" @click="pay()">立即支付</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: {}
		};
	},
	onLoad({ id }) {
		this.getDetail(id);
		// uni.login({
		// 	success: ({ code }) => {
		// 		console.log(code);
		// 		uni.request({
		// 			url: 'https://sl.rexuejiankang.com/api/parentXcx/login',
		// 			header: {
		// 				'content-type': 'application/json'
		// 			},
		// 			data: { code },
		// 			method: 'GET',
		// 			success: (res) => {
		// 				// console.log(res);
		// 			}
		// 		});
		// 	}
		// });
	},
	methods: {
		pay() {
			this.$request({
				url: ''
			});
		},
		async getDetail(orderId) {
			const res = await this.$request({
				url: this.$api.getDetails,
				data: { orderId }
			});
			this.detail = res;
		},
		async save() {
			const res = await this.$request({
				url: this.$api.addOrder,
				method: 'POST',
				data: {
					parentId: uni.getStorageSync('user').id,
					studentId: this.detail.id,
					totalPrice: this.item.userPay * this.day, //总价
					companyPayment: this.item.companyPay, //公司支付
					employeePayment: this.item.userPay, //员工支付
					remark: this.item.courseName, //备注
					schoolId: this.list[this.index].id, //学校id
					orderDetailXcxList: [
						{
							courseId: this.item.id, ///课程id
							quantity: this.day, //数量
							totalAmount: this.item.userPay * this.day, //总价
							companyPay: this.item.companyPay, //公司支付金额
							employeePay: this.item.userPay //员工支付金额
						}
					]
				}
			});
			if (res.code == 0) {
				this.orderId = res.data.orderId;
				this.pay(res.data);
			}
		},
		pay({ appId, timeStamp, nonceStr, package_str, signType, paySign }) {
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				{
					appId, //公众号ID，由商户传入
					timeStamp, //时间戳，自1970年以来的秒数
					nonceStr, //随机串
					package: package_str,
					signType, //微信签名方式：
					paySign //微信签名
				},
				(res) => {
					// showToast(res.err_msg);
					if (res.err_msg == 'get_brand_wcpay_request:ok') {
						this.jump(`/pages/order/scuess?orderId=${this.orderId}`);
					} else {
						this.$showToast('取消支付！');
					}
				}
			);
		},
	}
};
</script>

<style scoped lang="scss">
.payment-method.active {
	border-color: #3498db;
	background: #e8f4ff;
	box-shadow: 0 0 0 4rpx rgba(52, 152, 219, 0.2);
}
.payment-method {
	flex: 0 0 calc(50% - 7.5px);
	border: 1px solid #e0e7ff;
	cursor: pointer;
	transition: all 0.3s;
	background: #f8faff;
	.payment-icon {
		color: #3498db;
	}
	.payment-name {
		font-weight: 500;
		color: #2c3e50;
	}
}
.payment-methods {
	gap: 15px;
}
.btn-primary {
	background: linear-gradient(to right, #3498db, #2ecc71);
}
.btn {
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}
.status-paid {
	color: #27ae60;
}
.order-item {
	border-bottom: 1px solid #f0f5ff;
	.order-id {
		color: #7f8c8d;
		.iconfont {
			color: #3498db;
		}
	}
	.order-program {
		color: #2c3e50;
	}
}
.program-price {
	font-weight: bold;
	color: #e74c3c;
	.action-btn {
		color: #3498db;
		background: rgba(52, 152, 219, 0.1);
	}
}
.program-date {
	.iconfont {
		color: #3498db;
	}
	.date-badge {
		display: inline-block;
		background: #fff8e1;
		color: #f39c12;
	}
}
.program-image {
	width: 180rpx;
	height: 180rpx;
	background: linear-gradient(135deg, #74b9ff, #0984e3);
	font-size: 34px;
	flex-shrink: 0;
	box-shadow: 0 5px 15px rgba(116, 185, 255, 0.3);
}
.program-title {
	color: #2c3e50;
}
.program-date {
	color: #7f8c8d;
}

.section {
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	.section-header {
		border-bottom: 1px solid #f0f5ff;
		background: linear-gradient(to right, #f8faff, #ffffff);
		.section-title {
			color: #2c3e50;
			position: relative;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #3498db;
				border-radius: 4rpx;
			}
		}
		.action-btn {
			color: #3498db;
			background: rgba(52, 152, 219, 0.1);
			cursor: pointer;
		}
	}
	.info-row {
		border-bottom: 1rpx solid #f0f5ff;
		&:last-child {
			border-bottom: none;
		}
		.info-label {
			color: #7f8c8d;
		}
		.info-value {
			color: #2c3e50;
		}
	}
}

.header {
	background: linear-gradient(135deg, #3498db, #2ecc71);
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	position: relative;
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #3498db;
		border: 2px solid rgba(255, 255, 255, 0.5);
	}
}
</style>
